<template>
  <el-collapse-transition>
    <div class="classContainer">
      <div class="className">
        <span class="spanlabelimp">{{classInfo.className}}</span>
      </div>

      <div class="cls-info">
        <el-row>
          <el-col :span="8">
            <span class="spanlabel">课程进度：</span>
            <span
              class="spanlabelweight"
            >{{classInfo.useCourseHour||0}}/{{classInfo.courseDateCount||0}}</span>
            <span class="spanlabelweight" v-if="classInfo.courseType==2">(已上课/总课数)</span>
            <span class="spanlabelweight" v-else>(已上课时/总课时)</span>
          </el-col>
          <el-col :span="8">
            <span class="spanlabel">班级状态：</span>
            <span class="spanlabelweight" v-if="classInfo.classStatusMode==1">待开课</span>
            <span class="spanlabelweight" v-else-if="classInfo.classStatusMode==2">上课中</span>
            <span class="spanlabelweight" v-else-if="classInfo.classStatusMode==3">已结课</span>
            <span class="spanlabelweight" v-else-if="classInfo.classStatusMode==4">提前结课</span>
          </el-col>
          <el-col :span="8">
            <span class="spanlabel">创建日期：</span>
            <span class="spanlabelweight">{{classInfo.createTime.split(' ')[0]}}</span>
          </el-col>
        </el-row>
      </div>

      <div class="cls-basic">
        <span style="color: rgb(153, 153, 153);margin-bottom: 0.1rem;">班级基本信息</span>
        <el-row>
          <el-col :span="8">
            <span class="spanlabel">课程名称：</span>
            <span class="spanlabelweight">{{classInfo.courseName}}</span>
          </el-col>
          <el-col :span="6">
            <span class="spanlabel">科目：</span>
            <span class="spanlabelweight">{{classInfo.subjectName}}</span>
          </el-col>
          <el-col :span="6">
            <span class="spanlabel">课程类型：</span>
            <span class="spanlabelweight" v-if="classInfo.courseType==1">一对一</span>
            <span class="spanlabelweight" v-else-if="classInfo.courseType==2">全日/半日</span>
            <span class="spanlabelweight" v-else-if="classInfo.courseType==3">课时</span>
            <span class="spanlabelweight" v-else-if="classInfo.courseType==4">双师</span>
            <span class="spanlabelweight" v-else-if="classInfo.courseType==5">线上</span>
          </el-col>
          <el-col :span="4">
            <span class="spanlabel">授课模式：</span>
            <span class="spanlabelweight" v-if="classInfo.courseMode==1">大班</span>
            <span class="spanlabelweight" v-else-if="classInfo.courseMode==2">中班</span>
            <span class="spanlabelweight" v-else-if="classInfo.courseMode==3">小班</span>
          </el-col>
        </el-row>
        <div class="courseInfo">
          <table style="width:100%;" cellpadding="0" cellspacing="0">
            <tr>
              <td valign="top" style="width:1rem;">
                <span class="spanlabel">上课时间：</span>
              </td>
              <td>
                <span class="spanlabel">{{classInfo.startTime}} 至 {{classInfo.endTime}}</span>
                <div v-if="classInfo.courseType!=2">
                  <div
                  class="spanlabel"
                    v-for="item in classInfo.classSyllabusTime"
                    style="margin-top:0.1rem;"
                  >
                    {{item}}
                    <br />
                  </div>
                </div>
                <span
                  class="spanlabel"
                  v-else
                >{{classInfo.dayStartTime}}-{{classInfo.dayEndTime}}</span>
                <div style="margin-top:0.1rem;">
                  <span class="spanlabel">教师：</span>
                  <span
                    class="spanlabel"
                  >{{classInfo.teacherUserName}} &nbsp;&nbsp;|&nbsp;&nbsp;</span>
                  <span class="spanlabel">助教：</span>
                  <span
                    class="spanlabel"
                  >{{classInfo.assisUserName}} &nbsp;&nbsp;|&nbsp;&nbsp;</span>
                  <span class="spanlabel" v-if="classInfo.courseType!=4">教室：</span>
                  <span
                    class="spanlabel"
                    v-if="classInfo.courseType!=4"
                  >{{classInfo.classRoomName}}</span>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="2" >
                <div style="margin-top:0.1rem;">
                <span class="spanlabel">每次消耗：</span>
                <span class="spanlabel" v-if="classInfo.courseType==2">1天</span>
                <span class="spanlabel" v-else-if="classInfo.courseType==4">1节</span>
                <span class="spanlabel" v-else>{{classInfo.oneCourseHour}}课时</span>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <div class="line"></div>

      <div class="studentlist">
        <span style="color: rgb(153, 153, 153);margin-bottom: 0.1rem;">学员信息</span>&nbsp;&nbsp;
        <span>{{classInfo.studentNum}}/{{classInfo.recruitNum}}</span>
        <span>(现有学员/计划招生)</span>
        <div class="tablecss">
          <table style="width:100%;" cellpadding="0" cellspacing="0">
            <thead>
              <tr>
                <th>学员</th>
                <th style="min-width:0.5rem;">年龄</th>
                <th>进班日期</th>
                <th v-if="classInfo.courseType==2">数量(天)</th>
                <th v-else>数量(课时)</th>
                <th style="min-width:0.5rem;">签到</th>
                <th style="min-width:0.5rem;">请假</th>
                <th style="min-width:0.5rem;">补课</th>
                <!-- <th style="min-width:0.5rem;">迟到</th> -->
                <th style="min-width:0.5rem;">旷课</th>
                <th style="min-width:0.5rem;">学员状态</th>
              </tr>
            </thead>
            <tbody v-if="classInfo.studentlist.length>0">
              <tr v-for="li in classInfo.studentlist">
                <td align="center">
                  <img
                    src="../../../assets/img/common/boy.png"
                    style="width:0.14rem;height:0.18rem;margin-top:1px;"
                    v-if="li.genderMode==1"
                  />
                  <img
                    src="../../../assets/img/common/girl.png"
                    style="width:0.14rem;height:0.18rem;"
                    v-else-if="li.genderMode==2"
                  />
                  <span>{{li.realName}}</span>
                </td>
                <td align="center">{{li.age}}</td>
                <td align="center">{{li.joinDate}}</td>
                <td align="center">{{li.courseTimes||0}}/{{classInfo.courseDateCount||0}}</td>
                <td align="center">{{li.siginTimes}}</td>
                <td align="center">{{li.leaveTimes}}</td>
                <td align="center">{{li.makeupTimes}}</td>
                <!-- <td align="center">{{li.lateTimes}}</td> -->
                <td align="center">{{li.absentTimes}}</td>
                <td align="center">{{studenttuitionmode[li.studentTuitionMode]}}</td>
              </tr>
            </tbody>
            <tbody v-else>
              <tr>
                <td colspan="11" align="center">暂无数据</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </el-collapse-transition>
</template>

<script>
export default {
  props: ["classInfo", "studenttuitionmode"],
  data() {
    return {};
  }
};
</script>

<style lang="scss">
.classContainer {
  width: 100%;
  .className {
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
  }
  .cls-info {
    width: 100%;
    margin-bottom: 0.2rem;
  }
  .cls-basic {
    width: 100%;
    margin-bottom: 0.2rem;
    .courseInfo {
      width: 100%;
      margin-top: 0.1rem;
    }
  }
  .line {
    width: 100%;
    height: 1px;
    background: #f3f6fc;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
  }

  .studentlist {
    width: 100%;
    height: auto;
  }
}
</style>